<template>
  <div class="page-container">
    <div class="handle-box">
      <span style="padding:8px;">用户姓名/手机号码：</span>
      <el-input placeholder="请输入姓名/手机号码" v-model="query.keyWord" @keyup.enter="initAjaxMethod" class="inputbox"
        style="width: auto; margin-right: 10px"></el-input>
      <span style="padding:8px;"></span>
      <el-button type="success" icon="el-icon-search" size="medium" @click="handleSearch">搜索</el-button>
      <el-button type="warning" size="medium" icon="el-icon-refresh-left" @click="resultClick()">重置</el-button>
    </div>
    <el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header"
      @selection-change="handleSelectionChange">
      <el-table-column label="序号" align="center" width="100" fixed>
        <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
      </el-table-column>
      <el-table-column label="用户姓名" align="center">
        <template slot-scope="scope">{{ scope.row.nickname || scope.row.wechat_nickname }}</template>
      </el-table-column>
      <el-table-column label="用户性别" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.sex == 1">男</span>
          <span v-if="scope.row.sex == 2">女</span>
        </template>
      </el-table-column>
      <el-table-column label="用户电话" align="center">
        <template slot-scope="scope">{{ scope.row.mobile }}</template>
      </el-table-column>
      <el-table-column label="用户身份证" align="center" prop="credential_id" :formatter="$GLOBAL.idCardFormat"/>
      <el-table-column label="创建时间" align="center" prop="create_time" :formatter="$GLOBAL.dateFormat" />
      <el-table-column label="操作" width="320" align="center">
        <template slot-scope="scope">
          <el-button @click="setMatchmaker(scope.row)" type="text" size="small" icon="el-icon-open">编辑</el-button>
          <el-button @click="handleDelete(scope.row)" type="text" size="small" icon="el-icon-delete"
            class="red">注销</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background layout="total, prev, pager, next, jumper" :current-page="query.pageIndex"
        :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination> 
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialog" width="60%" :close-on-click-modal="false">
      <div class="list-group">
        <el-row :gutter="20">
          <el-col :span="3">
            <div class="list-title"><span class="mast-icon" v-if="modelList.nickname.request">*</span>{{
        modelList.nickname.name }}:</div>
          </el-col>
          <el-col :span="21">
            <el-input v-model="modelList.nickname.value" :placeholder="modelList.nickname.placeholder"></el-input>
          </el-col>
        </el-row>
      </div>
      <div class="list-group">
        <el-row :gutter="20">
          <el-col :span="3">
            <div class="list-title"><span class="mast-icon" v-if="modelList.sex.request">*</span>{{
        modelList.sex.name }}:</div>
          </el-col>
          <el-col :span="21">
            <el-radio-group v-model="modelList.sex.value">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
      </div>
      <div class="list-group">
        <el-row :gutter="20">
          <el-col :span="3">
            <div class="list-title"><span class="mast-icon" v-if="modelList.mobile.request">*</span>{{
        modelList.mobile.name }}:</div>
          </el-col>
          <el-col :span="21">
            <el-input v-model="modelList.mobile.value" :placeholder="modelList.mobile.placeholder"></el-input>
          </el-col>
        </el-row>
      </div>
      <div class="list-group">
        <el-row :gutter="20">
          <el-col :span="3">
            <div class="list-title"><span class="mast-icon" v-if="modelList.credential_id.request">*</span>{{
        modelList.credential_id.name }}:</div>
          </el-col>
          <el-col :span="21">
            <el-input v-model="modelList.credential_id.value"
              :placeholder="modelList.credential_id.placeholder"></el-input>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="editTepmlateAjax" v-if="addOrEdit == 2">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import imgUpload from '@/components/imgUpload/ImgUpload.vue';
export default {
  name: 'financeList',
  components: { imgUpload },
  data() {
    return {
      exhibition_id: '',
      query: {
        pageIndex: 1,
        pageSize: 10,
        keyWrod: '',
      },
      modelList: { 
        nickname: { value: '', request: true, name: '姓名', placeholder: '请输入姓名', type: 'input' },
        sex: { value: 1, request: true, name: '性别', placeholder: '请选择性别', type: 'input' },
        mobile: { value: '', request: true, name: '用户手机', placeholder: '请输入用户手机', type: 'input', reg: /^[1][1,2,3,4,5,7,8,9][0-9]{9}$/ },
        credential_id: { value: '', request: true, name: '身份证号码', placeholder: '请输入身份证号码', type: 'input', reg: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/ },
      },
      baseImgUrl: this.$API.IMG_PATH,
      formNames: {},
      zzTypeist: [],
      listMatchmaker: [],
      pageTotal: 0,
      tableData: [],
      fId: '',
      f_text: '',
      fTextModel: false,
      dialog: false,
      editVisible: false,
      namesVisible: false,
      formInline: {},
      srcList: [],
      setQuery: {
        matchmaker_id: '',
        id: ''
      }
    };
  },
  filters: {
    toFixedFile: function (val) {
      if (!val) return '0.00';
      return Number(val).toFixed(2);
    }
  },
  mounted() {
    this.initAjaxMethod();
    // this.ohterAjaxMethd();
  },

  methods: {
    //合同打回ajax
    ohterAjaxMethd() {
      this.$http
        .post(this.$API.TECHNICIAN_MATCH_MAKERLIST)
        .then((res) => {
          console.log('项目列表', res);
          if (res.code == 1) {
            this.listMatchmaker = Array.isArray(res.data) ? res.data : [];
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    //删除
    handleDelete(data) {
      this.delAjaxMethod(data.id);
    },
    //编辑
    createBus(row, index, status) {
      const loading = this.$loading({ text: '加载中...' });
      this.$http
        .post(this.$API.TECHNICIAN_EXAMINE, { id: row.id, status })
        .then((res) => {
          loading.close();
          console.log('项目列表', res);
          if (res.code == 1) {
            this.$message.success('操作成功');
            this.tableData[index].status = status;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    resultClick() {
      this.query.keyWrod = '';
      this.query.pageIndex = 1;
      this.initAjaxMethod();
    },
    matchmakerStatus() {
      this.query.pageIndex = 1;
      this.initAjaxMethod();
    },
    createMethod() {
      this.$router.push({ path: '/technicianAdd', query: { type: 1 } });
    },
    namesHald(e) {
      this.formNames = e;
      this.namesVisible = true;
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      let arr = [];
      if (this.multipleSelection.length <= 0) {
        this.$message({
          type: 'error',
          message: '请选择一个'
        });
        return false;
      } else {
        this.multipleSelection.forEach((item) => {
          arr.push(item.id);
        });
        this.delAjaxMethod(arr.join(','));
      }
    },
    delAjaxMethod(ids) {
      this.$confirm('此操作将删除用户在平台中所有数据，确定进行？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({ text: '加载中...' });
        this.$http
          .post(this.$API.MEMBER_REVIEW_DEL, { id: ids })
          .then((res) => {
            loading.close();
            if (res.code == 1) {
              this.$message.success('注销成功');
              this.initAjaxMethod();
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            this.$message.error(err.msg);
          });
      });
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val);
      this.initAjaxMethod();
    },
    handleSearch() {
      this.$set(this.query, 'pageIndex', 1);
      this.initAjaxMethod();
    },
    initAjaxMethod() {
      let data = {
        pageIndex: this.query.pageIndex, //[string]	是	当前页
        pageSize: this.query.pageSize, //[string]	是	每页条数
        keyWrod: this.query.keyWrod, //[string]	是	付款名称
      };
      this.$http
        .post(this.$API.MEMBER_REVIEW_LIST, data)
        .then((res) => {
          console.log('财务', res);
          if (res.code == 1) {
            this.tableData = Array.isArray(res.data.list) ? res.data.list : [];
            this.pageTotal = res.data.total;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    setMatchmaker(data) {
      this.modelList.nickname.value=data.nickname;
      this.modelList.sex.value=data.sex || 1;
      this.modelList.mobile.value=data.mobile;
      this.modelList.credential_id.value=data.credential_id;
      this.dialogTitle='编辑'; 
      this.dialog=true;
    },
    editTepmlateAjax() {
      //验证
      let test = this.testMethod();
      if (!test.flag) {
        this.$message.error(test.msg);
        return false;
      }
      const loading = this.$loading({ text: '加载中...' });
      this.$http
        .post(this.$API.MEMBER_REVIEW_EDIT, test.data)
        .then(res => {
          loading.close();
          console.log('管理员列表', res);
          if (res.code == 1) {
            this.$message.success('编辑成功');
            this.dialog=false;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          loading.close();
          this.$message.error(err.msg);
        });
    },
    //验证方法
    testMethod() {
      let flag = true,
        msg = '',
        data = {};
      for (let i in this.modelList) {
        if (this.modelList[i].request) {
          if (this.modelList[i].reg && !this.modelList[i].reg.test(this.modelList[i].value)) {
            flag = false;
            msg = this.modelList[i].placeholder;
            break;
          } else {
            if (!this.modelList[i].value || this.modelList[i].value == '') {
              flag = false;
              msg = this.modelList[i].placeholder;
              break;
            }
          }
        }
      }
      if (flag) {
        data = {
          nickname: this.modelList.nickname.value,
          sex: this.modelList.sex.value,
          mobile: this.modelList.mobile.value,
          credential_id: this.modelList.credential_id.value
        };
        if (this.type == 2) {
          data.id = this.id;
        }
      }
      return { flag: flag, data: data, msg: msg };
    }
  }
};
</script>

<style scoped>
.handle-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}

.el-input--small {
  display: initial;
}

.handle-input {
  width: auto;
  display: inline-block;
}

.mr10 {
  margin-right: 10px;
}

.red {
  color: #f56c6c;
}

.green {
  color: #67c23a;
}

.list-title {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
}

.list-group {
    padding: 10px 0;

}

.mast-icon {
    font-size: 20px;
    color: red;
    padding: 8px 6px;
    vertical-align: middle;
}
</style>